<template>
    <div>
        <top-swiper :top="toplist"></top-swiper>
        <card v-for="book in booklist" :key="book.id" :book="book"></card>
        <div class="noMore" v-if="!more">- 没有更多数据 -</div>
    </div>
</template>

<script>
import {get} from '@/util'
import Card from '@/components/Card/Card'
import TopSwiper from '@/components/TopSwiper/TopSwiper'

export default {
    components: {
        Card,
        TopSwiper
    },
    data() {
        return {
            booklist: [],
            toplist: [],
            page: 0,
            more: true
        }
    },
    onPullDownRefresh() {
        this.getList(true)
        this.getTop()
    },
    methods:{
        async getList(init) {
            if(init){
                this.page = 0
                this.more = true
            }
            wx.showNavigationBarLoading()
            const res =  await get('/weapp/booklist',{
                page : this.page
            })
            
            if(res.msg.length < 10 && this.page > 0){
                this.more = false
            }
            if(init){
                wx.stopPullDownRefresh()
                this.booklist = res.msg
            }else{
                this.booklist.push(...res.msg)
            }
            wx.hideNavigationBarLoading()
        },
        async getTop(){
            const top = await get('/weapp/getTop')
            this.toplist = top.msg
        }
    },
    onReachBottom () {
        if(!this.more){
            return
        }
        this.page = this.page + 1
        this.getList()
    },
    mounted() {
        this.getList(true)
        this.getTop()
    }
}
</script>

<style lang="stylus" scoped>
    .noMore
        text-align center
        font-size 14px
        color #999
        margin-bottom 10px
</style>

